<template>
  <div>
    <Nav />
    <main-exe :showDialog.sync="showDialog"></main-exe>
    <div class="main">
      <div class="left top">
        <el-card>
          <div class="tab">
            <el-menu
                router
                :default-active="$route.path"
                class="el-menu-demo"
                mode="horizontal"
            >
              <el-menu-item
                  v-for="(item, index) in navList"
                  :key="index"
                  :index="item.name"
              >
                {{ item.navItem }}
              </el-menu-item>
            </el-menu>
            <div class="line"></div>
          </div>
          <!-- 正文 -->
          <instruction v-show="$route.meta.title == 'exe'"></instruction>
          <message v-show="$route.meta.title == 'comment'"></message>
        </el-card>
      </div>
      <div class="right top">
        <video
            src="../../assets/img/experiment_guide_i_do.mp4"
            class="video"
            preload="preload"
            controls
        ></video>
        <el-card style="width: 250px" class="top">
          <h4 class="line1">教学支持热线</h4>
          <i class="el-icon-phone"><span style="font-size:14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13586579773</span></i><br/>
          <i class="iconfont icon-QQ"><span style="font-size:14px">QQ群：&nbsp;&nbsp;791571316</span></i>
        </el-card>
        <el-card class="top" style="width: 250px">
          <div class="team">
            <h4 class="line1">团队教师</h4>
            <a class="team-teach">教学情况</a>
          </div>
          <i class="el-icon-user-solid"><span style="font-size:14px">孔素然 宁波财经学院</span></i>
          <i class="el-icon-user-solid"><span style="font-size:14px">殷均平 宁波财经学院</span> </i>
          <i class="el-icon-user-solid"><span style="font-size:14px">张磊 &nbsp;&nbsp;宁波财经学院</span> </i>
        </el-card>
        <visit-data></visit-data>
      </div>
    </div>
  </div>
</template>

<script>
import VisitData from "@/components/visit-data/visit-data.vue";
import Nav from "@/components/nav/nav.vue";
import MainExe from "@/components/main-exe/main-exe.vue";
import Instruction from "@/components/Instruction/Instruction";
import Message from "@/components/Message/Message";

export default {
  components: {Nav, MainExe, Instruction, Message, VisitData},
  data() {
    return {
      activeIndex: "1",
      value: 4.8,
      showDialog: false,
      navList: [
        {name: "/experiment", navItem: "指导书"},
        {name: "/experiment/comment", navItem: "讨论区"},
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  background: #f4f4f4;
  padding: 0 100px;
  display: flex;
  justify-content: center;
  .left {
    width: 871px;
    margin-right: 20px;
  }

  .right {
    .video {
      width: 250px;
    }

    .team {
      display: flex;
      position: relative;

      .team-teach {
        position: absolute;
        right: 20px;
        background: #4976e8;
        color: #fff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 3px;
      }
    }
  }
}
</style>